<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet">
</head>
<body>

<table id="role-list"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addRole">新增角色</button>
      <button class="layui-btn layui-btn-sm" lay-event="btnExport">全部导出</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend id="rightText">菜单权限(请选择角色)</legend>
</fieldset>
<div class="layui-btn-container" style="margin-left:20px;">
    <button type="button" class="layui-btn layui-btn-sm" lay-on="getMenuChecked">修改菜单权限</button>
</div>
<div id="menu" class="demo-tree demo-tree-box" style="width: 300px; height: 400px;margin-left:20px; overflow: scroll;"></div>
<script src="js/layui.js"></script>
<script type="module">
    import roleManager from './js/role-manager.js'
    
    layui.use(['layer','table','tree','util'], function(){
        var $ = layui.$;
        var table = layui.table;
        var tree = layui.tree;
        var util = layui.util;
        var role = null;
        var menuData=[];
        // 初始化菜单数据
        var initMenuData = function(){
            menuData = [{
                id:1,
                title:'数据看板',
                checked:true,
                spread: true,
                disabled:true,
            },{
                id:2,
                title:'公司管理',
                spread: true,  
                children:[{
                id:3,
                title:'企业列表',
                checked:false,
            },{
                id:4,
                title:'企业用户',
                checked:false, 
            },{
                id:5,
                title:'绑定印章',
                checked:false,
            }]
            },{
                id:6,
                title:'充值管理',
                spread: true,  
                children:[{
                id:7,
                title:'套餐包',
                checked:false,
            },{
                id:8,
                title:'充值记录',
                checked:false,
            }]
            },{
                id:9,
                title:'系统管理',
                spread: true,  
                children:[{
                id:10,
                title:'角色管理',
                checked:false,
            },{
                id:11,
                title:'人员管理',
                checked:false,
            },{
                id:12,
                title:'服务器状态',
                checked:false,
            },{
                id:13,
                title:'系统日志',
                checked:false,
            }]
            }];
        }
        initMenuData();
        // 加载角色列表
        var loadRoleList = function(isExport){
            roleManager.getRoleList($,function(rspData){
                //表格数据渲染
                var insTable = table.render({
                    elem: '#role-list'
                    ,title:'角色列表'
                    ,toolbar:'#toolbarDemo'
                    ,width: 650
                    ,height: 300
                    ,cols: [[{ type:"numbers", width:100, title: '序号', sort: true, fixed: 'left'}
                    ,{field:'id', hide:true}
                    ,{field:'name', width:200, title: '角色名称'}
                    ,{field:'createTime', width:160, title: '创建时间'}
                    ,{fixed: 'right', title:'操作', width: 150, minWidth: 150, toolbar: '#barDemo'}
                    ]]
                    ,data: rspData.data
                    ,even: true
                    ,page: true //是否显示分页
                    ,limits: [20,50,10]
                    ,limit: 10 //每页默认显示的数量
                });
                if(isExport){
                    table.exportFile(insTable.config.id,rspData.data,'xls');
                }
            })
        }
        loadRoleList();
        // 工具栏事件
        table.on('toolbar(role-list)', function(obj){
            switch(obj.event){
                case 'addRole':
                    layer.prompt({
                        formType: 0,
                        value: '',
                        title: '请输入角色名称',
                        }, function(value, index, elem){
                            if(value.trim() == ""){
                                layer.msg("角色名称不能为空",{icon:5});
                                return;
                            }
                            var role = { name : value.trim()}
                            roleManager.addRole($,role,function(rspData){
                                loadRoleList();
                            })
                            layer.close(index);
                    });
                break;
                case 'btnExport':
                    loadRoleList(true);
                break;
            };
        });

        //触发单元格工具事件
        table.on('tool(role-list)', function(obj){ // 双击 toolDouble
            var role = obj.data;
            if(obj.event === 'del'){
                if(role.id == 1){
                    layer.msg("系统管理员不能删除",{icon:5})
                } else {
                    layer.confirm('删除角色后关联的用户也会删除，请谨慎操作！', function(index){
                        obj.del();
                        roleManager.deleteRole($,role,function(){
                            loadRoleList();
                            initMenuData();
                            $("#rightText").html("菜单权限(请选择角色)");
                        })
                        layer.close(index);
                    });
                }
                
            }
        });
        // 行选中事件
        table.on('row(role-list)', function(obj){
            role = obj.data//得到当前行数据
            initMenuData();
            $("#rightText").html("菜单权限(" + role.name + ")");
            // 获取菜单权限
            roleManager.getRoleRightIds($,role.id,function(rspData){
                $.each(menuData,function(i,menu){
                    var childs = menu.children;
                    $.each(childs,function(j,child){
                        $.each(rspData.data,function(k,id){
                            if(child.id == id){
                                child.checked = true
                            }
                        })
                    })
                })
                //刷新菜单
                loadMenuList();
            })
        });
        
        //加载菜单
        var loadMenuList = function(){
            tree.render({
                elem: '#menu'
                ,data: menuData
                ,showCheckbox: true  //是否显示复选框
                ,id: 'menu'
            });
        }
        loadMenuList();
        // 修改权限事件
        util.event('lay-on', {
            getMenuChecked: function(othis){
                if(role == null){
                    layer.msg("请选择角色",{icon:5});
                    return;
                }
                if(role.id == 1){
                    layer.msg("超级管理员拥有所有权限，不支持修改")
                    return;
                }
                var checkedData = tree.getChecked('menu'); //获取选中节点的数据
                var menuIdList = new Array();
                $.each(checkedData,function(i,menu){
                    menuIdList.push(menu.id);
                    var childs = menu.children;
                    $.each(childs,function(j,child){
                        menuIdList.push(child.id);
                    });
                });
                if(menuIdList.length == 0){
                    layer.msg("请选择菜单",{icon:5});
                    return;
                }
                // 更新菜单权限
                var data = { id : role.id,menuIdList : menuIdList};
                roleManager.updateRoleRightIds($,data,function(rspData){
                    layer.msg("更新成功")
                });
            }
        });
    });
</script>
</body>

</html>